<template>
	<view class="page flex flex-column flex-x-center">
		<view class="p-4 flex-2 flex flex-center">
			<view class="text-center" v-if="dealer.state === null">
				<uni-icons type="locked" color="var(--xl-primary)" size="120" />
				<view class="h1 font-weight-600 my-10 text-white">申请开通分销权限</view>
				<view class="pt-4 h9 text-placeholder">申请开通分销权限后，您可以通过分享链接或二维码的方式推广本平台，推广成功后，您将获得相应的分销奖励
				</view>
				<view class="pt-4 h8 text-error font-weight-600"
					v-if="dealer.config.dealer_apply_refund === 'no' && dealer.config.dealer_apply_price > 0">{{
						dealer.config.dealer_apply_refund_text }}</view>
				<view class="pt-10">
					<button v-if="dealer.config.dealer_apply_price > 0 && (WEBCONFIG?.mp_audit || !$system.isIOS())" size="large"
						class="bg-primary text-white" @click="applyDeaaler">支付(￥{{
							dealer.config.dealer_apply_price }}元)申请开通</button>
					<button v-else-if="dealer.config.dealer_apply_price > 0" size="large"
						class="bg-placeholder text-white">联系客服申请开通</button>
					<button v-else size="large" @click="applyDeaaler" class="bg-primary text-white">申请开通</button>
				</view>
			</view>
			<view class="text-center" v-else-if="dealer.state === 0">
				<uni-icons type="locked" color="var(--xl-primary)" size="120" />
				<view class="h1 font-weight-600 my-10 text-white">等待后台审核开通分销权限</view>
				<view class="pt-4 h9 text-placeholder">申请开通分销权限后，您可以通过分享链接或二维码的方式推广本平台，推广成功后，您将获得相应的分销奖励
				</view>
				<view class="pt-4 h8 text-error font-weight-600"
					v-if="dealer.config.dealer_apply_refund === 'no' && dealer.config.dealer_apply_price > 0">{{
						dealer.config.dealer_apply_refund_text }}</view>
				<view class="pt-10">
					<button class="bg-placeholder" size="large">等待后台审核</button>
				</view>
			</view>
			<view class="text-center" v-else-if="dealer.state === 1">
				<uni-icons type="checkmarkempty" color="var(--xl-primary)" size="120" />
				<view class="h1 font-weight-600 my-10 text-white">已获得分销权限</view>
				<view class="pt-4 h9 text-placeholder">申请开通分销权限后，您可以通过分享链接或二维码的方式推广本平台，推广成功后，您将获得相应的分销奖励
				</view>
			</view>
			<view class="text-center" v-else-if="dealer.state === 2">
				<uni-icons type="info-filled" color="var(--xl-primary)" size="120" />
				<view class="h1 font-weight-600 my-10 text-white">分销权限异常</view>
				<view class="pt-4 h9 text-placeholder">当前分销权限已被冻结，你不可进行操作，请联系管理员</view>
				<view class="pt-10">
					<button class="bg-danger text-white" size="large">权限异常</button>
				</view>
			</view>
		</view>
		<view class="flex-1" />
		<x-pay ref="xPayRef" @success="getDealer" />
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useUserStore, useWebConfigStore, useRefs } from '@/stores';
import { $page, $http, $message,$system } from '@/utils';
import { onLoad } from "@dcloudio/uni-app";
const userStore = useUserStore();
const { USERINFO } = useRefs(userStore);
const webConfigStore = useWebConfigStore();
const { WEBCONFIG } = useRefs(webConfigStore);
const xPayRef = ref();
const dealer = ref({
	state: null,
	link: '',
	qrcode: '',
	user: {
		people_num: '--',
		order_num: '--',
		order_price: '--',
		dealer_price: '--',
	},
	config: {
		dealer_apply: 'yes',
		dealer_apply_price: '',
		dealer_apply_refund: '',
		dealer_apply_refund_text: '',
		dealer_level: 0,
		dealer_proportion: 0,
		dealer_proportion_level_1: 0,
		dealer_proportion_level_2: 0,
		dealer_proportion_level_3: 0,
	},
})
onLoad(() => {
	$page.title('申请开通代理');
	getDealer();
})
const getDealer = () => {
	$http.get('Dealer/dealer').then((res: any) => {
		if (res.code === $http.ResponseCode.SUCCESS) {
			dealer.value = res.data;
		}
	})
}
const applyDeaaler = () => {
	$http.post('Dealer/applyDealer').then((res: any) => {
		if (res.code === $http.ResponseCode.SUCCESS) {
			getDealer();
			$message.success(res.msg);
		} else if (res.code === $http.ResponseCode.NEED_PAY) {
			xPayRef.value.show({
				type: 'dealer_apply',
				alias_id: USERINFO.id,
				price: dealer.value.config.dealer_apply_price,
				title: '申请开通分销权限'
			});
		}
	})
}
</script>

<style lang="scss" scoped>
.page {
	height: calc(100vh - var(--window-top));
}
</style>